<template>
	<view>
		<view class="grouponTitle"><view class="grouponWord1">拼团成功</view></view>
		<view class="grouponTitle" style="padding-top: 40rpx;">
			<mix-button :disabled="uploadImg" text="再次一键拼团" icon="icon-jia2" :iconSize="36" :isConfirm="false" @onConfirm="goProductDetail()"></mix-button>
		</view>
		<view class="grouponTitle ">
			<view class="userList">
				<view class="userImg" v-for="(item, index) in userInfo" :key="index">
					<image :src="item.headimgurl" class="tui-avatar" style="border-color:#e96d71 ;" v-if="item.isCap === 1"></image>
					<image :src="item.headimgurl" class="tui-avatar" v-else></image>
					<view class="cap" v-if="item.isCap === 1">团长</view>
					<view>{{ item.nickName }}</view>
				</view>
			</view>
		</view>
		<view class="grouponTitle ">
			<tui-list-cell :hover="false">
				<view class="tui-padding tui-flex" @tap="goProductDetail()">
					<view>商品名称</view>
					<view>
						<span class="tui-size-26" style="color: #E96D71;">{{ productName }}</span>
						<text class="iconfont iconxiangyou"></text>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-padding tui-flex">
					<view>收货人</view>
					<view>
						<span class="tui-size-26">{{ name }}</span>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-padding tui-flex">
					<view>收货地址</view>
					<view>
						<span class="tui-size-26">{{ address }}</span>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" v-if="status!=2">
				<view class="tui-padding tui-flex">
					<view>拼团成功时间</view>
					<view><span class="tui-size-26">{{bargainEndDate}}</span></view>
				</view>
			</tui-list-cell>
		</view>
		<view class="tui-safe-area"></view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
import tuiCountdown from '@/packageB/components/tui-countdown/tui-countdown.vue';
import mixin from '@/utils/mixin.js';
import mixButton from '@/components/mix-button/mix-button.vue';
import mixEmpty from '@/components/mix-empty/mix-empty.vue';
import tuiListCell from '@/components/list-cell/list-cell';
export default {
	mixins: [mixin],
	components: {
		tuiCountdown,
		mixEmpty,
		mixButton,
		tuiListCell
	},
	data() {
		return {
			id: '',
			userInfo: [],
			address: '',
			name: '',
			time: '',
			productName:'',
			productId:'',
			bargainEndDate:'',
			status:0,
		};
	},
	onLoad(options) {
		this.id = options.bargainId;
		this.name = options.name;
		this.address = options.address;
		this.time = options.time;
		this.getGrouponInfo();
	},
	onShow() {},
	filters: {
		moneyFormat(value) {
			let unit = value.toFixed(2);
			return unit;
		}
	},
	methods: {
		getGrouponInfo() {
			const params = {
				bargainId: this.id
			};
			this.$http.getGrouponDetail(params).then(res => {
				this.productName = res.data.productName;
				res.data.bargainDetail.forEach((item, index) => {
					if (res.data.buyerId === item.createUser) {
						item.isCap = 1;
					}
					this.userInfo.push(item);
					this.productId = res.data.productLevelPriceData.productId
					this.bargainEndDate = res.data.bargainEndDate
					this.status = res.data.bargainStatus
				});
			});
		},
		goProductDetail(){
			this.$util.gotoGoodsDetail('productId', this.productId);
		},
	}
};
</script>

<style lang="scss">
.cap {
	width: 50rpx;
	height: 30rpx;
	background-color: #e96d71;
	position: absolute;
	top: 0px;
	left: 100rpx;
	color: #ffffff;
	font-size: 20rpx;
}
.userImg {
	position: relative;
	display: inline-block;
	margin: 4px 9px 0px 0px;
}
.userList {
	margin-top: 0rpx;
	padding: 30rpx;
	width: 100%;
}
.tui-safe-area {
	height: 1rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
}
.mt {
	padding-top: 40rpx;
}
.grouponBB {
	margin-top: 8rpx;
}
.grouponPB {
	padding-bottom: 90rpx;
}
.grouponTitle {
	text-align: center;
	color: #e96d71;
	background-color: #ffffff;
}
.grouponWord1 {
	font-size: 40rpx;
	font-weight: bolder;
	padding-top: 60rpx;
}
.grouponWord2 {
	font-size: 26rpx;
	padding-top: 40rpx;
	padding-bottom: 60rpx;
}
.countDown {
	color: #333;
	font-size: 40rpx;
	font-weight: bolder;
}
.grouponNum {
	color: #333;
	font-size: 42rpx;
	font-weight: bolder;
	text-align: center;
	padding-top: 10rpx;
}
.peopleNum {
	color: #e96d71;
}
.grouponInfo {
	background-color: #e96d71;
	color: #ffffff;
	text-align: center;
	width: 160rpx;
	height: 100rpx;
	margin: 20px auto;
	border-radius: 10px;
	font-size: 28rpx;
}
.grouponHr {
	height: 1px;
	background-color: #ffffff;
	width: 90%;
	margin: 0 auto;
}
.grouponContent {
	padding: 5rpx 0;
}
.tui-padding {
	box-sizing: border-box;
}
.tui-flex {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 26rpx;
}
.rightStyle {
	float: right;
	color: #333333;
	margin-top: 10rpx;
}
</style>
